<script setup lang="ts">
import {ref, watch, defineEmits} from "vue";
import {getPermissionsFormDataApi} from "@/apps/admin/api/common";
import {getRoleDetailsApi, updatedRoleApi, createdRoleApi} from "@/apps/admin/api/administer/role";

const emits = defineEmits(['success'])

const drawer = ref(false)

const loading = ref(false)

const permissions = ref([])

const formData = ref({
  id: 0,
  name: '',
  auth: [],
  remarks: '',
  status: '1'
})


function open(id?: number) {
  if (typeof id === 'number') {
    formData.value.id = id
    getRoleDetails()
  } else {
    getPermissionsFormData()
    drawer.value = true
  }
}


async function getRoleDetails() {
  const result = await getRoleDetailsApi(formData.value.id)
  if (result.code === 200) {
    getPermissionsFormData()
    formData.value = {
      id: result.data.id,
      name: result.data.name,
      auth: result.data.auth,
      remarks: result.data.remarks,
      status: result.data.status.toString()
    }
    drawer.value = true
  }
}

/**
 * 获取权限数据
 */
function getPermissionsFormData() {
  getPermissionsFormDataApi().then(result => {
    if (result.code === 200) {
      permissions.value = result.data
    }
  })
}


async function submitRole() {
  const result = await (formData.value.id ? updatedRoleApi({...formData.value}) : createdRoleApi({...formData.value}))
  if (result.code === 200) {
    emits('success')
    close()
  }
}

function close() {
  drawer.value = false
}

watch(() => drawer.value, (value) => {
  if (!value) {
    formData.value = {
      id: 0,
      name: '',
      auth: [],
      remarks: '',
      status: '1'
    }
  }
})

defineExpose({open})
</script>

<template>
  <el-drawer :title="formData?.id?'编辑角色':'创建角色'" destroy-on-close :size="860" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" v-model="drawer">
    <el-form ref="form" :model="formData" label-width="120px" class="demo-ruleForm" status-icon>
      <el-form-item label="角色名称" prop="desc">
        <el-input v-model="formData.name" placeholder="请输入角色名称" maxlength="10" show-word-limit clearable></el-input>
      </el-form-item>
      <el-form-item label="权限分配" prop="permissions">
        <el-cascader-panel clearable v-model="formData.auth" :options="permissions" :props="{value:'key',label:'name',multiple:true}"/>
      </el-form-item>
      <el-form-item label="备注说明" prop="remarks">
        <el-input v-model="formData.remarks" maxlength="30" show-word-limit clearable></el-input>
      </el-form-item>
      <el-form-item label="角色状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio border label="1">启用</el-radio>
          <el-radio border label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="app-margin-right-interval" @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="submitRole" :loading="loading">
          {{ loading ? '正在保存中' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<style scoped lang="scss">

</style>